<template>
    <div id="app" >
        <div id="dingbu">
            
            <span id="wenxuan" @click="wenClick">‹</span>
            <span >文轩登录</span>
        </div>
        <div>
            <input type="name" v-model="usersname" placeholder="用户名/邮箱/手机号">

            <input type="password" v-model="psw" placeholder="请输入密码">
        </div>
        <br>
        <div id="btn">
            <button id="on" @click="loginClick">登录</button>
        </div>
        <br>
        <div id="wangji">
            <router-link to="/My/name"> <span id="zhuce">立即注册</span></router-link>
           
            <span id="mima">忘记密码</span>
        </div>
        <br>
        <br>
        <br>
        <div id="qita">
            <span>┈┈┈┈┈┈┈┈</span>
            <span>其他方式</span>
            <span>┈┈┈┈┈┈┈┈</span>
        </div>
        <div id="qqweixin">
            <img src="/static/xinlang.png" alt="">
            <img src="/static/qq.png" alt="">
        </div>
    </div>
</template>

<script>
     import {mapState} from 'vuex';
export default {
    computed:{
        ...mapState([
            "islogin"
        ])
    },
    data:function(){
        return{
            usersname:"",
            psw:0,
        }
    },
    methods:{
        wenClick:function(){
            location.href="/"
        },
        loginClick:function(){
            var qq = {
                usersname:this.usersname,
                psw:this.psw
            }
        // console.log(qq)
            this.http.post("/api/users/login",qq)
            .then(res=>{
                console.log(res.data.msg)
                alert(res.data.msg)
                //  location.href ="#/"
                if(res.data.err==0){
                    location.href="#/Corridors"
                }
                
            })
            
        }
    }
}
</script>

<style scoped>
    #app{
        width: 100vw;
        height: 100vh;
        background-color: white;
    }
    #dingbu{
        text-align: center;
        background-color: #FAFAFA;
        width: 100%;
        height: 40px;
        line-height: 40px;
    }
    #wenxuan{
        cursor: pointer;
        color: red;
        font-size: 40px;
        padding-left: 15px;
    float: left;
    }
    input{
        width: 100%;
        height: 30px;
    }
    #on{
        
        border: solid 1px #F41E33;
        width: 350px;
        height: 35px;
        background-color: #F41E33;
        border-radius: 10px;
        color: white;
        font-size: 15px
    }
    #btn{
        text-align: center;
    }
    #wangji{
        text-align: center;
    }
    #zhuce{
        padding-left: 20px;
        float: left;
        color: black;
    }
    #mima{
        padding-right: 20px;
        float: right;
    }
    #qita{
        text-align: center;
        color: #999999;
    }
    img{
        width: 50px;
        height: 50px;
    }
    #qqweixin{
        margin: 10px;
        text-align: center;
    }
</style>
